<template>
  <div class="login">
    <header class="header">
      <div class="provide">
        <img class="school_badge" src="@/assets/images/login.logo.text.png" alt="" />
        <!-- <img class="logo_text" src="@/assets/images/logo_text.png" alt="" /> -->
      </div>
      <p class="title">自助打印服务平台</p>
    </header>

    <div class="container">
      <!-- tab -->
      <div class="scroll_top">
        <div class="arrow_left"></div>
        <ul class="scroll">
          <li
            class="item"
            :class="{ active: item.value === loginForm.loginType }"
            v-for="(item, index) of $dictUtils.getDictList('login_type')"
            :key="index"
            @click="loginForm.loginType = item.value"
          >
            <p>{{ item.label }}</p>
          </li>
        </ul>
        <div class="arrow_right"></div>
      </div>

      <!-- 统一身份认证登录 -->
      <div class="enter" v-if="loginForm.loginType === 4">
        <van-button
          round
          class="login_btn"
          @click="$window.location.href = $setting.loginUrl"
          >登录</van-button
        >
      </div>
      <!-- 账号密码登录 -->
      <div class="enter" v-if="loginForm.loginType === 3">
        <div class="item">
          <i class="iconfont iconhaoma"></i>
          <!-- <span class="label">账号</span> -->
          <van-field
            class="field"
            v-model="account.userId"
            left-icon="iconhaoma"
            placeholder="请输入账号"
          />
        </div>
        <div class="item">
          <i class="iconfont iconmima"></i>
          <van-field
            class="field"
            type="password"
            v-model="account.password"
            left-icon="iconhaoma"
            placeholder="请输入密码"
          />
        </div>

        <div class="item">
          <i class="iconfont iconyanzhengma"></i>
          <van-field
            class="field"
            v-model="account.signature"
            left-icon="iconhaoma"
            placeholder="请输入图形验证码"
          />
          <img
            class="imageCode"
            :src="imageCode"
            v-if="imageCode"
            alt="验证码"
            @click="getImageCode"
          />
        </div>

        <van-button round class="login_btn" @click="login">登录</van-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loginForm: {
        loginType: 4,
      },
      account: {
        // 账号密码登录
        userId: "",
        password: "",
        signature: "", // 验证码
      },
      schoolConfig: {},
      imageCode: "",
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let {signature,err} = this.$route.query;
      if (err + '' ==='0' && signature) {
        this.standardLogin(signature);
      }
      this.getSchool();
      this.getImageCode();
      this._getUserConfig();

      // let data = {
      //   userId: "201898039",
      //   admin: "true",
      //   fix: "true",
      // };
      // console.log(this.$utils.encryptByDES(JSON.stringify(data)), "加密");
    },
    // 大连理工登录
    async dllgLogin(json) {
      try {
        this.$toast.loading({ message: "正在登录..." });
        const { userId, admin, fix } = json;
        const { currentTime } = await this.$http({
          url: "/private-xm/api/gateway/currentTime",
          method: "post",
        });
        const signature = this.$utils.aesMinEncrypt(
          JSON.stringify({ userId, timeMillis: currentTime })
        );
        const res = await this.$http({
          url: "/private-xm/login/user",
          method: "post",
          data: {
            signature,
            schoolCode: "4121010141", // 大连理工
            // schoolCode: "4000011111", // 正脉微校
            loginType: 6,
          },
        });
        this.$toast.clear();
        await this.$store.dispatch(`user/${this.$types.LOGIN_AFTER}`, res);
        await this.$store.commit(`app/${this.$types.SET_DLLGJSON}`, json);
        this.$router.push("/home");
      } catch (error) {
        this.$toast.clear();
        console.log(error, "error");
        this.$toast.fail(error);
      }
    },
    /**
     * 获取用户信息
     */
    async _getUserConfig() {
      let data = this.$utils.getUrlParam("data");
      console.log(data,'data')
      if (data) {
        try {
          data = data.replace(/\s/ig,'+')
          // 保存一下原始的加密数据
          let desVal = this.$utils.decryptByDES(data);
          console.log(desVal,'desVal')
          const json = JSON.parse(desVal);
          console.log(json, "json");
          this.$store.commit(`app/${this.$types.SET_ORIGIN_DATA}`, data);
          this.dllgLogin(json);
          // console.log(json)
        } catch (error) {
          console.log(error, data);
          this.$dialog
            .alert({
              title: "提示",
              message: "参数异常",
            })
            .then(() => {});
        }
      }
    },
    // 获取图片验证码
    getImageCode() {
      this.$http({
        url: "/private-xm/api/gateway/getImageCode",
        method: "get",
        responseType: "blob",
      })
        .then((res) => {
          var reader = new FileReader();
          reader.readAsDataURL(res.data);
          reader.onload = () => {
            this.imageCode = reader.result;
          };
        })
        .catch((error) => {
          console.log(error, "error");
          this.$toast(error);
        });
    },
    // 获取学校配置信息
    getSchool() {
      this.$http({
        url: "/private-xm/school/getSchoolList",
        method: "post",
      })
        .then((result) => {
          this.schoolConfig = result.data.shift();
          this.$store.commit(
            `user/${this.$types.SET_SCHOOLCONFIG}`,
            this.schoolConfig
          );
        })
        .catch((error) => {
          this.$toast(error);
          console.log(error, "error");
        });
    },
    // 统一身份认证登录
    standardLogin(signature) {
      this.$toast.loading({
        message: "登录中,请稍后....",
        mask: true,
      });
      this.$http({
        url: "/private-xm/login/user",
        method: "post",
        data: {
          loginType: this.loginForm.loginType,
          schoolCode: this.schoolConfig.schoolCode,
          signature,
        },
      })
        .then(async (res) => {
          this.$toast.clear();
          this.$store.commit(
            `user/${this.$types.SET_LOGINTYPE}`,
            this.loginForm.loginType
          );
          await this.$store.dispatch(`user/${this.$types.LOGIN_AFTER}`, res);
          this.$router.push("/home");
        })
        .catch((error) => {
          this.$toast.clear();
          this.$toast(error);
          console.log(error, "error");
        });
    },
    // 账号密码登录
    login() {
      this.$toast.loading({
        message: "登录中,请稍后....",
        mask: true,
      });
      const data = {
        ...this.account,
        loginType: this.loginForm.loginType,
        schoolCode: this.schoolConfig.schoolCode,
        userId:this.$utils.aesMinEncrypt(this.account.userId,this.$utils.loginKey,this.$utils.loginIv),
        password:this.$utils.aesMinEncrypt(this.account.password,this.$utils.loginKey,this.$utils.loginIv),
      };
      this.$http({
        url: "/private-xm/login/user",
        method: "post",
        data,
      })
        .then(async (res) => {
          this.$toast.clear();
          this.$store.commit(
            `user/${this.$types.SET_LOGINTYPE}`,
            this.loginForm.loginType
          );
          await this.$store.dispatch(`user/${this.$types.LOGIN_AFTER}`, res);
          this.$router.push("/home");
        })
        .catch((error) => {
          this.$toast.clear();
          this.$toast(error);
          console.log(error, "error");
        });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/variable.scss";
.login {
  height: 100vh;
  overflow-y: auto;
  background: linear-gradient(0deg, #f9de72, #919ebc);
  // background: #0955b3;
  padding-top: 1.333333rem /* 50/37.5 */;
  .container {
    margin: 0.8rem /* 30/37.5 */;
    padding: 0.266667rem /* 10/37.5 */;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0.266667rem /* 10/37.5 */;
    .enter {
      .login_btn {
        background: $primary;
        color: #fff;
        margin-top: 0.4rem /* 15/37.5 */;
        width: 100%;
        border: 0;
      }
      .item {
        display: flex;
        align-items: center;
        border: 1px solid #eee;
        border-radius: 0.266667rem /* 10/37.5 */;
        margin-top: 0.266667rem /* 10/37.5 */;
        padding-left: 0.4rem /* 15/37.5 */;
        .imageCode {
          margin-right: 0.266667rem /* 10/37.5 */;
          border-radius: 0.133333rem /* 5/37.5 */;
        }
        .label {
          font-size: 0.426667rem+$fontsize /* 16/37.5 */;
          color: #fff;
          margin-left: 0.266667rem /* 10/37.5 */;
        }
        .field {
          flex: 1;
        }
        .iconfont {
          font-size: 0.666667rem+$fontsize /* 25/37.5 */;
          color: #fff;
        }
      }
      ::v-deep .van-cell {
        background: transparent;
        .van-field__control {
          color: #fff;
        }
        &::after {
          border: 0;
        }
      }
    }
    .scroll_top {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.133333rem /* 5/37.5 */;
      border-bottom: 1px solid #fff;
      .scroll {
        flex: 1;
        display: flex;
        align-items: center;
        overflow-x: scroll;
        padding: 0.133333rem /* 5/37.5 */;
        .item {
          min-width: 2.666667rem /* 100/37.5 */;
          margin-right: 0.266667rem /* 10/37.5 */;
          color: #fff;
          font-size: 0.373333rem+$fontsize /* 14/37.5 */;
          &.active {
            color: $primary;
          }
        }
      }
    }
  }
  .header {
    width: 100%;
    .title {
      font-size: 0.4rem+$fontsize /* 15/37.5 */;
      font-weight: 600;
      text-align: center;
      // color: $primary;
      color: #fff;
    }
    .provide {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0.266667rem /* 10/37.5 */;
      .school_badge {
        // width: 1.333333rem /* 50/37.5 */;
        height: 1.333333rem /* 50/37.5 */;
        margin-right: 0.266667rem /* 10/37.5 */;
      }
      .logo_text {
        width: 3.2rem /* 120/37.5 */;
      }
    }
  }
}
</style>
